<template>
    <div class="home" >
        <div class="home_head">
           <ul>
             <li :class="$route.path==item.path ?'atcive' :''" v-for="item in titleList" :key="item.id" @click="jumpPath(item)">{{ item.titleName }}</li>
           </ul>
        </div>
        <div class="home_content"  v-if="$route.path=='/'">
            <div class="header">
                <img :src="contentHeader" alt="" srcset="">
            </div>
            <div class="content">
                <div class="listleft">
                    <div class="earchProduct">
                        <el-input v-model="product" placeholder="搜索" size="mini"></el-input>
                        <el-button type="primary" size="mini" @click="seachList">搜索</el-button>
                    </div>
                    <div style="margin-top: 20px;">
                        <ul>
                            <li class="noticeList vegetableList" v-for="item in taglist" :key="item.id" @click="toSupply(item)">
                                <span>{{ item.label }}</span>
                                <i class="el-icon-arrow-right"></i>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="middieImage">
                    <img class="headerBenner" v-if="banners[0]" :src="baseUrl +banners[0].img" alt="">
                    <div class="headerBenner_middie">
                        <img  v-if="banners[1]" :src="baseUrl +banners[1].img" alt="">
                        <img v-if="banners[2]"  :src="baseUrl +banners[2].img"alt="">
                    </div>
                    <div class="headerBenner_middie">
                        <img v-if="banners[3]":src="baseUrl +banners[3].img" alt="" srcset="">
                        <img v-if="banners[4]" :src="baseUrl +banners[4].img" alt="" srcset="">
                    </div>
                </div>
                <div class="rightEnterprise">
                    <h4>公告列表</h4>
                    <div style="margin-top: 20px;">
                        <ul>
                            <li class="noticeList" v-for="item in homeList" :key="item.id" @click="jumpNews(item)">
                                <span class="sp1">{{ item.title }}</span>
                                <span class="sp2">{{getTime(item.createTime)}}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="footer">
                <p>Copyright © 2024 此网站专业有效 版权所有</p>
            </div>
        </div>
        <router-view />
    </div>
</template>

<script>
import homeApi from '../../api/apiHome'
import moment from 'moment'
 export default {
    data(){
        return {
            name:'张三',
            titleList:[
                {
                    titleName:'首页',
                    id:1,
                    path:'/'
                },
                {
                    titleName:'供应信息',
                    id:2,
                    path:'/supply'
                },
                {
                    titleName:'求购信息',
                    id:3,
                    path:'/wantToBuy'
                },
                {
                    titleName:'价格行情',
                    id:4,
                    path:'/price'
                },
                {
                    titleName:'三农资讯',
                    id:5,
                    path:'/agriculture'
                },
                // {
                //     titleName:'农业技术',
                //     id:6,
                //     path:'/technology'
                // },
                // {
                //     titleName:'涉农展会',
                //     id:8,
                //     path:'/exhibition'
                // },
                
            ],
            contentHeader:'http://www.znw58.com/file/upload/202402/23/212655951.png',
            benner:'http://www.znw58.com/file/upload/202402/23/215017421.png',
            product:'',
            homeList:[],
            taglist:[],
            banners:[],
            baseUrl:'https://www.lucklylife.cn/api',         
        }
    },
    mounted(){
        this.getHomeList()
        this.classification()
        this.getHomeBannner()
        let userInfo = JSON.parse(localStorage.getItem('userInfo'))
        if(userInfo&&userInfo.role == 1){
            this.titleList.push({
                    titleName:'用户管理',
                    id:7,
                    path:'/special'
                },)
        }
    },
    methods:{
        getHomeBannner(){
            homeApi.getHomeBanners().then(res=>{
                this.banners = res.data
            })
        },
        seachList(){
            homeApi.seachClass(this.product).then(res=>{
                if(res.code==200){
                    this.$message.success(res.msg)
                    this.taglist=res.data
                }else{
                    this.$message.error(res.msg)
                }
            })  
        },
        jumpPath(item){
            if(!this.isToken&&item.path=='/'){
                this.$router.push(item.path)
            }else if(this.isToken){
                this.$router.push(item.path)
            }else{
                this.jumpLogin()
            }
            
        },
        toSupply(item){
            this.isToken?
            this.$router.push({path:'/supply',query:{id:item.id}})
            :
            this.jumpLogin()
           

        },
        
        jumpLogin(){
            this.$router.push('/login')
        },
        async getHomeList(){
          const result  =  await  homeApi.getHomeList(0)
          if(result.code!=200)return this.$message.error(result.msg)
          this.homeList = result.data
        },
        jumpNews(item){
            this.$router.push({path:'/agriculture',query:{id:item.id}})
        },
        // getClassification
        async classification(){
          const result =  await homeApi.getClassification()
          this.taglist = result.data
        }
        
    },
    computed:{
        isToken(){
            return localStorage.getItem("token")
        },
        getTime(){
            return (time)=>{
                return moment(time).format('MM-DD HH:mm')
            }
        }
    }
 }
</script>

<style lang="less" scoped>

.home{
    width: 80%;
    height: 100%;
    box-sizing: border-box;
    margin: 0 auto;

    padding:15px;
    .home_head{
        width: 100%;
        height: 50px;
        margin: 0 auto;
        ul{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #007fff;
            color: #fff;
            cursor: pointer;
            li{
                padding: 10px;
            }
            li:hover{
                background-color: #058;
                border-radius: 5px;
            }
        }
    }
}
.atcive{
    background-color: #058;
    border-radius: 5px;
}
.home_content{
    .header img{
        width: 100%;
        height: 150px;
    }
    img{
        cursor: pointer;
    }
    .content{
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        position: relative;
        .headerBenner{
            width: 704px;
            height: 300px;
            object-fit: cover;
        }
        .headerBenner_middie{
            width: 704px;
            height: 150px;
            overflow: hidden;
            display: flex;
            justify-content: space-between;
            align-items: center;
            img{
                width:calc( 50% - 10px);
                height:calc( 100% - 20px);
                margin: 0 10px;
                object-fit: cover;
                &:hover{
                    transform: scale(1.05);
                    transition: all 0.3s ease 0s;
                    border-radius:5px;
                }
            }
            img:first-child{
                margin-left: 0;
            }
            img:last-child{
                margin-right: 0;
            }
        }
        .listleft{
            width: 300px;
            min-height: 300px;
            max-height: 603px;
            overflow: auto;
            background-color: #fff;
            box-sizing: border-box;
            padding: 10px;
            .earchProduct{
                display: flex;
                align-items: center;
                justify-content: space-between;
                .el-button{
                    margin-left: 15px;
                }
            }
            .noticeList{
                display: flex;
                justify-content: space-between;
                font-size: 14px;
                color: #666;
                cursor: pointer;
                box-sizing: border-box;
                padding: 5px;
                line-height: 28px;
                align-items: center;
                margin-bottom: 5px;
                &:hover{
                    background-color:#f0f0f5;
                }
                .sp2{
                    width: 60px;
                    color: #999;
                }
                .sp1{
                    flex: 1;
                    white-space: nowarp;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
            }
            .vegetableList:hover{
                background-color: #007fff;
                color: #fff;
            }
           
        }
        .listleftab{
            position: absolute;
            left: 300px;
            top:0;
            height: 532px;
            display: none;
        }
        .rightEnterprise{
            width: 300px;
            min-height: 300px;
            max-height: 603px;
            overflow: auto;
            background-color: #fff;
            box-sizing: border-box;
            padding: 10px;
            h4{
                text-align: center;
            }
            .noticeList{
                display: flex;
                justify-content: space-between;
                font-size: 14px;
                color: #666;
                cursor: pointer;
                margin-bottom: 5px;
                padding:5px;
                &:hover{
                    background-color:#f0f0f5;
                }
                .sp2{
                    width: 80px;
                    color: #999;
                }
                .sp1{
                    flex: 1;
                    white-space: nowarp;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
            }
        }
    }
    .footer{
        width:100%;
        height: 100px;
        background:url('../../assets/bgimg/footer.jpg') no-repeat;
        background-size: 100% 100%;
        background-position: center;
        position: relative;
        margin-top:10px;
        p{
            // width:100%;
            height: 30px;
            text-align:center;
            font-size:16px;
            color:red;
            position:absolute;
            right:0;
            top:0;
        }
    }
    
}
</style>